<template>
  <div>
    <div class="banner">
      <img :src="index_banner" alt="杭州风鼎有限公司" />
      <div style="position:absolute;width:1300px;top:35%;left:50%;margin-left:-650px;">
        <svg-icon icon-class="indexTitle" :style="style"></svg-icon>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main animated fadeInRight delay-2" ref="whyBig">
        <h3 class="title">为什么要做大数据分析平台？</h3>
        <p
          class="introduce"
        >为企业提供一站式的大数据分析平台，帮助企业高效率、低成本的建立数据应用体系，其灵活、易用、高性能和一站式的特性，让企业轻松实现数据驱动的精细化运营，全面激活业务增长，提升经营绩效！</p>
      </div>
    </div>
    <div class="magic-section politics-box circle-bg">
      <div class="magic-main" ref="politics">
        <h2 class="title">政法办公传统痛点</h2>
        <div class="small-circle" style="bottom:250px;left:190px;"></div>
        <div class="small-circle" style="bottom:270px;right:-90px;"></div>
        <div class="middle-circle" style="left:-90px;"></div>
        <div class="middle-circle" style="top:220px;right:220px;"></div>
        <a-row type="flex" justify="space-between" :gutter="10" class="politics">
          <a-col
            :span="4"
            v-for="(item,index) in politicsList"
            :key="index"
            class="politics-li"
            :offset="index == 0 || index == 5 ? 0 : 1"
          >
            <div class="circle">{{item.title}}</div>
            <div class="text">{{item.text}}</div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main" ref="painSpot">
        <h2 class="title">行业痛点</h2>
        <div class="painSpot">
          <a-row type="flex" justify="space-between" :gutter="84" class="painSpot">
            <a-col :span="8" v-for="(item,index) in painSpotList" :key="index" class="spot">
              <span>0{{index+1}}</span>
              <span>{{item}}</span>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main" ref="developTime">
        <h2 class="title">时代发展需要</h2>
        <div class="developTime">
          <a-row type="flex" justify="space-between" :gutter="120">
            <a-col :span="8" v-for="item in developTimeList" :key="item.id">
              <img :src="item.url" :alt="item.title" />
              <p>{{item.title}}</p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main" ref="platform">
        <h2 class="title">大数据分析平台有哪些功能？</h2>
        <h3 class="english-title">What are the functions of big data analysis platform?</h3>
        <div class="platform">
          <img :src="platformImg" alt="大数据分析平台有哪些功能？" />
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main" ref="systemFun">
        <h2 class="title" style="padding-top:35px">系统功能</h2>
        <div class="systemFun">
          <a-row type="flex" justify="space-between" :gutter="10">
            <a-col
              :span="4"
              v-for="(item,index) in systemFunList"
              :key="index"
              class="system"
              :offset="index == 0 || index == 5 ? 0 : 1"
            >
              <span>{{(index+1) >= 10? 10:'0'+(index+1) }}</span>
              <span>{{item}}</span>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="magic-section analysis">
      <img :src="honeycombBg" alt class="honeycomb-bg" />
      <div class="magic-main" ref="analysis">
        <h2 class="title">大情报分析平台带来的价值</h2>
        <h3 class="english-title">The value of big data analysis platform</h3>
        <div class="analysis-list">
          <a-row type="flex" justify="space-between" :gutter="86">
            <a-col :span="6" v-for="item in analysisList" :key="item.id" class="analysis-list-li">
              <h3>{{item.title}}</h3>
              <p>{{item.text}}</p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main" ref="built">
        <h2 class="title">建成效果</h2>
        <h3 class="english-title">Built in effect</h3>
        <Hexagon :builtList="builtList" />
      </div>
    </div>
  </div>
</template>

<script>
import developTime1 from "@/assets/images/develop-time1.png";
import developTime2 from "@/assets/images/develop-time2.png";
import developTime3 from "@/assets/images/develop-time3.png";
import Hexagon from "@/components/Hexagon/Hexagon";

export default {
  components: {
    Hexagon
  },
  computed: {
    style() {
      let width = 553 * (document.body.offsetWidth / 1920);
      let height = 129 * (document.body.offsetWidth / 1920);
      let left = -9 * (document.body.offsetWidth / 1920);
      return {
        width: 553,
        height: 129,
        position: "relative",
        left: left
      };
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 实现当滚动到指定位置，触发动画
      // let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度
      // this.gdjz('earth', 'earth animated bounceInDown', 50)
      let _this = this;
      let refArray = [
        { ref: "politics" },
        { ref: "painSpot" },
        { ref: "developTime" },
        { ref: "platform" },
        { ref: "systemFun" },
        { ref: "analysis" },
        { ref: "built" }
      ];
      refArray.forEach(r => {
        _this.gdjz(r.ref, 40);
      });
    },
    gdjz(div, offset) {
      let dom = this.$refs[div]; // 等同于document.querySelector('.earth') true
      if (dom) {
        var a, b, c, d;
        d = dom.offsetTop; // 元素距离相对父级的高度，这里父级指的是body
        a = eval(d + offset);
        b =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop; //  获取窗口滚动条高度
        c = document.documentElement.clientHeight || document.body.clientHeight; // 获取浏览器可视区的高度
        if (b + c > a) {
          let animated = [
            "zoomIn",
            "zoomInLeft",
            "zoomInRight",
            "zoomInDown",
            "zoomInUp",
            "bounceIn",
            "bounceInLeft",
            "bounceInRight",
            "bounceUp",
            "fadeIn",
            "fadeInDown",
            "fadeInLeft",
            "fadeInUp",
            "lightSpeedIn"
          ];
          let random = parseInt(Math.random() * animated.length);
          !dom.classList.contains("animated") &&
            dom.classList.add("animated", animated[random], "delay-2");
        }
      }
    }
  },
  data() {
    return {
      index_banner: this.$global.IMG_URL + "/index_banner.png",
      platformImg: this.$global.IMG_URL + "/platform.png",
      honeycombBg: this.$global.IMG_URL + "/honeycomb-bg.png",

      politicsList: [
        { title: "领导决策", text: "缺少数据支撑，难以辅助决策" },
        {
          title: "重点人员",
          text: "数据分散，历史信息关联性差，不能有效形成人员关系图谱"
        },
        { title: "研判预警", text: "主动预警功能缺失不能做到事情有效预警" },
        { title: "联动协作", text: "联动指挥协调不顺畅，沟通协作不便捷" },
        {
          title: "信息管理",
          text: "信息传递效率慢，共享程度低，查询历史信息繁琐"
        }
      ],
      analysisList: [
        {
          id: 1,
          title: "减负",
          text:
            "整合资源，优化流程，提高办案质效，解决案多人少矛盾，实现政法工作智能化"
        },
        {
          id: 2,
          title: "服务",
          text:
            "服务于政法部门、政府职能部门、社会公众，全面提升司法公信力和人民群众满意度"
        },
        {
          id: 3,
          title: "规范",
          text:
            "健全细化《政法部门网上业务协同、流转、共享应用规范》，积极推动政法体制改革"
        },
        {
          id: 4,
          title: "高效",
          text:
            "以实战为需求，以大数据为引领，打造政法大数据应用的创新模式，大数据推动“智慧”政法，促进司法效率全面提升"
        }
      ],
      developTimeList: [
        { id: 1, title: "推进政法大数据应用", url: developTime1 },
        { id: 2, title: "优化业务管理模式", url: developTime2 },
        { id: 3, title: "避免重复劳动", url: developTime3 }
      ],
      builtList: [
        {
          title: "维稳信息汇集 “大平台”",
          text:
            "加快信息传递，上传下达更加迅速，降低信息传递成本，节省人力物力和财力;简化行政运作环节和程序，推进维稳作信息化建设，以信息化引领维稳工作现代化"
        },
        {
          title: "情报信息互联互通“大中枢”",
          text:
            "大力推动涉稳机关横向实现以法院/检察院/公安/司法/国安为主的政法机关单位和维稳成员单位的涉稳情报系统互联互通，涉稳情报信息共享;纵向实现省、市、县、乡四级维稳网络贯通、涉稳信息互通"
        },
        {
          title: "维稳事件处置的“指挥部”",
          text:
            "集成指挥/通信/情报/研判、控制为一体的应急指挥调度模式，使省委政法委具有“多媒体受理/智能化决策/可视化指挥/立体式调度”的全方位指挥功能，达到辅助决策、快速指挥、高效运转的指挥调度体系建设目标"
        },
        {
          title: "辅助领导决策的“参谋部”",
          text:
            "根据维稳工作的需要进行分析/研判/预警/统计/比对，对重点人员活动进行监测预警，预测矛盾纠纷和群体性事件的发展趋势，为省委领导研究/决策/督办维稳工作当好参谋助手"
        }
      ],
      systemFunList: [
        "情报管理",
        "研判预警",
        "应急处置",
        "决策支撑",
        "目标管控",
        "风险评估",
        "工作管理",
        "区域协同",
        "系统设置",
        "技术支撑"
      ],
      painSpotList: [
        "信息收集不够灵敏",
        "预警预防不够有效",
        "化解稳控不够到位",
        "指挥协调不够顺畅",
        "联动处置不够高效",
        "工作管理不够便捷"
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.painSpot {
  margin-top: 120px;
}

.developTime {
  text-align: center;
  margin-bottom: 80px;

  img {
    margin-top: 90px;
    width: 227px;
  }

  p {
    margin-top: 62px;
    color: #696969;
    font: 30px / 45px '微软雅黑';
  }
}

.systemFun {
  margin-top: 50px;
  padding-top: 20px;

  .system {
    background: url('../assets/images/spotBg.png') no-repeat;
    background-position: 24px bottom;
    padding-bottom: 16px;
    background-size: 224px 13px;
    margin-bottom: 98px;

    span:nth-child(2n+1) {
      font: 50px / 70px Arial;
      color: #CCD8F7;
      margin-right: 24px;
    }

    span:nth-child(2n) {
      font: 31px / 70px '微软雅黑';
      color: #000;
    }
  }
}

.spot {
  background: url('../assets/images/spotBg.png') no-repeat;
  background-position: 65px bottom;
  padding-bottom: 16px;
  background-size: 282px 13px;
  margin-bottom: 98px;

  span:nth-child(2n+1) {
    font: 50px / 75px Arial;
    color: #CCD8F7;
    margin-right: 12px;
  }

  span:nth-child(2n) {
    font: 31px / 75px '微软雅黑';
    color: #000;
  }
}

.built-title {
  margin-bottom: 20px;

  span {
    width: 66px;
    height: 76px;
    display: block;
    float: left;
    font: 29px / 76px Arial;
    background-image: url('../assets/images/built-title.png');
    text-align: center;
    color: white;
    margin-right: 33px;
  }

  p {
    font: 35px / 76px Arial;
    color: #000;
    float: left;
  }
}

.built {
  margin-top: 80px;
  margin-bottom: 40px;

  .text {
    margin-bottom: 50px;
    text-align: justify;
    padding-left: 99px;
    font: 18px / 30px '微软雅黑';
    color: #696969;
  }
}

.politics-box {
  .magic-main {
    position: relative;
  }
}

.politics {
  margin-top: 110px;

  .politics-li {
    &:nth-child(2n) {
      position: relative;
      top: 45px;
    }

    margin-bottom: 130px;
  }

  .text {
    margin-top: 58px;
    width: 150px;
    margin-left: 15px;
    color: #696969;
    text-align: justify;
    font: 18px / 36px '微软雅黑';
  }
}
</style>